<template>
  <view class="container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 空状态提示 -->
    <view class="empty-state" v-if="!avatarUrl">
      <image :src="technicianInfo ? technicianInfo.avatar : '/static/icon/图片_picture.svg'" class="empty-icon"></image>
      <text class="empty-text">你还没有上传头像哦～</text>
      <button class="upload-btn" @tap="chooseImage">上传头像</button>
    </view>

    <!-- 头像预览 -->
    <view class="avatar-preview" v-else>
      <image :src="technicianInfo.avatar" mode="aspectFill" class="preview-image"></image>
      <button class="upload-btn" @tap="chooseImage">重新上传</button>
    </view>

    <!-- 头像要求说明 -->
    <view class="requirements">
      <view class="requirements-title">
        <text>工装头像照片要求</text>
      </view>
      <view class="requirements-content">
        <text class="desc">工装头像即为服务人员形象照，是用户下单选择服务人员时的重要参考因素，请按照以下要求先拍摄好照片后再进行上传：</text>
        <view class="requirement-item text-red">
          1. 请身着正装或工装，背靠白墙或浅纯色背景墙，距镜头2米左右，拍摄含腰部到头顶的正面半身照；
        </view>
        <view class="requirement-item text-red">
          2. 身体需摆正，双手自然下垂，头顶及身体两侧留空，不要用大头照；
        </view>
        <view class="requirement-item">
          3. 照片须清晰真实，大小不低于750×750像素，不得过度美颜，与实拍照片的对比分数至少为80分。
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      CustomBar: uni.getSystemInfoSync().statusBarHeight + 44,
      avatarUrl: '',
      uploadUrl: '/minio/upload',
      baseUrl: '',
      techId: '',
      technicianInfo: null
    }
  },

  onLoad() {
    // 获取baseUrl
    this.baseUrl = uni.getStorageSync('baseUrl') || 'https://api.example.com'
    
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.techId) {
      this.techId = userInfo.techId
      this.loadWorkAvatar()
    }
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    // 加载工装头像
    async loadWorkAvatar() {
      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/technician/technician/${this.techId}`,
          method: 'GET'
        })

        if (result.data.code === 200 && result.data.data) {
          this.technicianInfo = result.data.data
          this.avatarUrl = result.data.data.avatar || ''
        }
      } catch (err) {
        console.error('获取头像失败:', err)
        uni.showToast({
          title: '获取头像失败',
          icon: 'none'
        })
      }
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0])
        }
      })
    },
    
    // 上传图片
    async uploadImage(filePath) {
      uni.showLoading({
        title: '上传中...'
      })
      
      try {
        const uploadRes = await uni.uploadFile({
          url: uni.$config.baseUrl + this.uploadUrl,
          filePath: filePath,
          name: 'file',
          formData: {
            type: 'work'
          }
        })

        const data = JSON.parse(uploadRes.data)
        if (data.code === 200) {
          this.technicianInfo.avatar = data.url
          // 更新用户头像信息
          await this.updateUserAvatar(data.url)
          uni.showToast({
            title: '上传成功',
            icon: 'success'
          })
        } else {
          throw new Error(data.msg || '上传失败')
        }
      } catch (err) {
        uni.showToast({
          title: err.message || '上传失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 更新用户头像
    async updateUserAvatar(url) {
      try {
        // 更新本地technicianInfo的工装头像
        if (this.technicianInfo) {
          this.technicianInfo.avatar = url  // 先更新avatar字段
          
          const res = await uni.request({
            url: `${uni.$config.baseUrl}/technician/technician`,
            method: 'PUT',
            data: this.technicianInfo
          })
          if (res.data.code !== 200) {
            throw new Error(res.data.msg || '更新失败')
          }
        } else {
          throw new Error('技师信息不存在')
        }
      } catch (err) {
        uni.showToast({
          title: err.message || '更新头像失败',
          icon: 'none'
        })
        throw err
      }
    },

    // 显示上传要求
    showRequirements() {
      uni.showModal({
        title: '工装头像要求',
        content: '1. 请身着正装或工装\n2. 背景为白墙或浅色\n3. 拍摄半身照，保持端正\n4. 图片清晰度不低于750×750像素',
        showCancel: false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 40rpx;
  padding-top: 100rpx;
}

.cu-custom {
  .cu-bar {
    padding-right: 27rpx;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
    
    .content {
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .action {
      font-size: 40rpx;
      
      .cuIcon-back {
        margin-left: 30rpx;
      }
      
      .cuIcon-question {
        font-size: 36rpx;
        color: #666;
      }
    }
  }
}

.empty-state {
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
}

.avatar-preview {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .preview-image {
    width: 400rpx;
    height: 400rpx;
    border-radius: 8rpx;
    margin-bottom: 40rpx;
  }
}

.upload-btn {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #0081ff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.requirements {
  margin: 40rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .requirements-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
  }
  
  .requirements-content {
    .desc {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
      margin-bottom: 20rpx;
    }
    
    .requirement-item {
      font-size: 28rpx;
      line-height: 1.6;
      margin-bottom: 16rpx;
      padding-left: 20rpx;
      
      &.text-red {
        color: #e54d42;
      }
    }
  }
}
</style> 